<template>
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <n-date-picker
      v-model:value="dataVal"
      panel
      small
      type="daterange"
      @update:value="handleDateUpdate"
      @confirm="handleDateConfirm"
      class="date-style"
      actions="none"
    />
  </n-config-provider>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { NConfigProvider } from "naive-ui";
import { zhCN, dateZhCN } from "naive-ui";
const dataVal = ref("");
// 时间选择
// [开始时间时间戳，结束时间时间戳]
const handleDateUpdate = (val: string[]) => {
  console.log("选择时间", val);
};
//确认
const handleDateConfirm = (val: string[]) => {
  console.log("确认时间", val);
  console.log("绑定时间", dataVal.value);
};
</script>

<style lang="scss" scoped>
.date-style {
  //缩小倍数
  transform: scale(0.7);
  //缩放控制中心
  transform-origin: left top;
  // transform-origin: 10% 10%;
  display: flex;

  /* 下面的宽高需要根据实际组件尺寸调整 */
  width: calc(100% * 0.7); /* 宽度缩小到70% */
  height: calc(40px * 0.7); /* small尺寸默认高度约28px */
}
</style>
